<template v-if="isReady">
    <view v-if="formControl.showLabel" :style="formControl.labelStyle" class="lib-component__selector-label">
        {{ formControl.label }}
	</view>
</template>

<script>
import Lib from '../../index';

export default {
    name: 'lib-selector-label',
    emit: ['ready'],
    props: {
        formControl: {
            type: Object,
            default: () => {
                return null;
            },
            required: true,
        }
    },
    data() {
        return {
            isReady: false,
        }
    },
    methods: {
        init(){
            this.formControl.showLabelChange((val)=>{
                // console.log(`showLabel:${val}`);
            });
        },
    },
    mounted() {
        this.$watch('formControl', function (newValue, oldValue) {
            if (Lib.form.FormUtils.isFormControl(newValue)) {
                if (this.isReady === false) {
                    this.isReady = true;
                    this.$emit('ready');
                    this.init();
                }
            }
        }, { immediate: true });
    },
    watch: {

    },
}
</script>




<style lang="scss">
@import "../selector.scss";
</style>